<style>
.file_input .el-input__inner{
  color:blue !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}
</style>

<template>
  <div class="sys_setting_formdata_style">
    <div class="item func">
      <p class="title">
        浏览器展示Logo
      </p>
      <el-input
        v-model="syslogo"
        @click.native="handleClick(formdata.JE_SYS_SYSLOGO)"
        class="file_input"
        readonly
      />
      <i
        @click="uploadFile('JE_SYS_SYSLOGO','ico','syslogo')"
        class="jeicon jeicon-file"
        style="padding: 8px;top:25px;right:1px;"
      />
      <p class="holder">
        像素:16*16、格式:ico
      </p>
    </div>
    <div class="item">
      <p class="title">
        页面Title
      </p>
      <el-input
        v-model="data.JE_SYS_TITLE"
        clearable
      />
    </div>
    <div class="item">
      <p class="title">
        版权信息
      </p>
      <el-input
        v-model="data.JE_SYS_COPYRIGHT"
        clearable
      />
    </div>
    <div class="item func">
      <p class="title">
        首页头部Logo
      </p>
      <el-input
        v-model="logo"
        @click.native="handleClick(formdata.JE_SYS_LOGO)"
        class="file_input"
        readonly
      />
      <i
        @click="uploadFile('JE_SYS_LOGO','png','logo')"
        class="jeicon jeicon-file"
        style="padding: 8px;top:25px;right:1px;"
      />
      <p class="holder">
        格式:png
      </p>
    </div>
    <div class="item func">
      <p class="title">
        通知Logo
      </p>
      <el-input
        v-model="notice"
        @click.native="handleClick(formdata.JE_SYS_NOTICELOGO)"
        class="file_input"
        readonly
      />
      <i
        @click="uploadFile('JE_SYS_NOTICELOGO','jpg,jpeg,png,bmp,ico,gif','notice')"
        class="jeicon jeicon-file"
        style="padding: 8px;top:25px;right:1px;"
      />
      <p class="holder">
        格式:jpg,jpeg,png,bmp,ico,gif
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Jmsj',
  props: {
    formdata: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    const data = {
      JE_SYS_SYSLOGO: this.formdata.JE_SYS_SYSLOGO,
      JE_SYS_TITLE: this.formdata.JE_SYS_TITLE,
      JE_SYS_COPYRIGHT: this.formdata.JE_SYS_COPYRIGHT,
      JE_SYS_LOGO: this.formdata.JE_SYS_LOGO,
      JE_SYS_NOTICELOGO: this.formdata.JE_SYS_NOTICELOGO,

    };
    return {
      data,
      logo: this.fieldName(this.formdata.JE_SYS_LOGO),
      syslogo: this.fieldName(this.formdata.JE_SYS_SYSLOGO),
      logoFlag: true,
      syslogoFlag: true,
      noticeFlag: true,
      notice: this.fieldName(this.formdata.JE_SYS_NOTICELOGO),
    };
  },
  methods: {
    uploadFile(field, type, val) {
      const that = this;
      const flag = `${val}Flag`;
      if (that[flag]) {
        that[flag] = false;
        JE.uploadFile({
          uploadFileType: 'func',
          otherConfig: { allow: type },
          post_params: { uploadType: 'OTHER' },
          callback(obj) {
            that.formdata[field] = `${obj.name}*${obj.url}`;
            that.data[field] = `${obj.name}*${obj.url}`;
            that[val] = obj.name;
            JE.msg('上传成功！');
            that[flag] = true;
          },
        });
        setTimeout(() => {
          that[flag] = true;
        }, 1500);
      }
    },
    fieldName(val) {
      const lastIndex = val.lastIndexOf('*');
      const extensionName = val.substring(0, lastIndex);
      return extensionName;
    },
    handleClick(val) {
      if (JE.isNotEmpty(val)) {
        const fileKey = val.split('*')[1];
        const fileName = val.split('*')[0];
        JE.File.doAct('preview', '', '', fileKey, fileName);
      }
    },
  },
};
</script>
